<script setup lang="ts">
  import { reactive} from 'vue'
  import { Form as AForm, FormItem as AFormItem} from 'ant-design-vue'

  const form = reactive({
    password: '',
    newPassword: '',
    confirmPassword: ''
  })
</script>

<template>
    <div class="change-password">
        <div class="left">
            <a-form :label-col="{style: {width: '90px'}}" :wrapper-col="{style: {width: '250px'}}">
                <a-form-item label="原密码">
                    <a-input v-model:value="form.password"></a-input></a-form-item>
                <a-form-item label="新密码">
                    <a-input v-model:value="form.newPassword"></a-input></a-form-item>
                <a-form-item label="确认密码">
                    <a-input v-model:value="form.confirmPassword"></a-input></a-form-item>
                <a-form-item>
                    <a-button type="primary" style="float: right;">确定</a-button></a-form-item>
            </a-form>
        </div>
        <div class="divide-line"></div>
        <div class="right">
            <p class='desc'>密码策略：</p>

            <p>至少含大写字母个数1</p>
            <p>至少含小写字母个数1</p>
            <p>至少含数字个数1</p>
            <p>必须包含大写字母、小写字母、数字、特殊字符中的3种</p>
            <p>密码最小长度8</p>
            <p>首位字符不允许为数字</p>
            <p>不允许包含用户名</p>
            <p>不允许与前3次的密码相同</p>
            <p>新密码中不能包含以下特殊字符： &lt;&gt;')+/ *</p>
            <p>修改密码之后请等待5分钟</p>
            <p>首位字符不允许为空格</p>
        </div>
    </div>
</template>

<style lang="less">
.change-password {
    display: flex;
    justify-content: center;
    align-items: stretch;
    .left {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .divide-line {
        width: 2px;
        background: #d9d9d9;
        margin: 0 40px;
    }
    .right {
        p {
            margin-bottom: 4px;
            &.desc {
                margin-bottom: 15px;
                font-weight: bold;
            }
        }
    }
}
</style>